<template>
	<view style="display: flex; flex-direction: column; height: 100vh">
		<view class="search_container" style="flex: none">
			<u-search placeholder="搜索小区" actionText="清除" :label="area"
				v-model="keyword" @custom="clearArea" @blur="searchBlur"
				@focus="searching = true"></u-search>
		</view>
		<view style="height: 100%">
			<lotus-address v-show="!searching" style="height: 100%"
				@choice="handleChoiceStreet" @areaChoice="areaChoice"
				@initLotusAddressTree="handleInitLotusAddressTree"
				@choseVal="choseValue"
				:lotusAddressData="lotusAddressData"></lotus-address>
			<view v-show="searching">
				<view v-if="(searchList || []).length >= 0"
					style="font-size: 32rpx; color: #3576f2; padding: 16rpx 32rpx 0 32rpx">
					<view v-for="(item, i) in searchList || []" :key="i"
						@click.stop="handleSelectStreet(i)"
						style="padding: 24rpx 0; border-bottom: 1rpx solid #e7e7e7">
						{{ item.townName }}
					</view>
				</view>
				<template v-else>
					<view> 暂无数据 </view>
				</template>
			</view>
		</view>
	</view>
</template>
<script>
	import lotusAddress from '../../components/Winglau14-lotusAddress/Winglau14-lotusAddress.vue';
	import {
		queryTownList
	} from '@/api/town';
	import {
		debounce
	} from '@/utils/fun';
	export default {
		components: {
			'lotus-address': lotusAddress,
		},
		data() {
			return {
				area: '',
				lotusAddressData: {
					visible: true,
					provinceName: '',
					cityName: '',
					townName: '',
				},
				region: '',
				keyword: '',
				searching: false,
				searchList: [],
				lotusAddressTree: [],
			};
		},
		watch: {
			keyword(value) {
				if (value) {
					this.searchTown();
				}
			},
		},
		onReady() {
			this.searchTown = debounce(this.searchTown, 500);
		},
		onHide() {
			this.searching = false;
		},
		methods: {
			handleInitLotusAddressTree(tree) {
				this.lotusAddressTree = tree;
			},
			searchBlur() {
				setTimeout(() => {
					this.keyword = '';
					this.searching = false;
				}, 50000);
			},
			searchTown() {
				const params = {
					pageNo: 1,
					pageSize: 999,
					townName: '*' + this.keyword + '*', // 模糊查询格式
				};
				queryTownList(params).then((res) => {
					this.searchList = res.data.result.records;
				}).catch((e) => {});
			},
			clearArea() {
				this.area = '';
				this.keyword = '';
			},
			areaChoice(e) {
				// 区县选择结果
				// console.log(e);
				this.area = e;
			},
			handleChoiceStreet(arr) {
				// 区县街道选择结果
				console.log('handleChoiceStreet', arr);
				this.$nextTick(()=>{
					if (arr[0].name === '东阳市') {
						uni.navigateTo({
							url: '/subpak_survey/houseDongyang/houseDongyang?extra=' +
								encodeURIComponent(JSON.stringify(arr)),
						});
						return;
					}else if (arr[0].name === '兰溪市') {
            uni.navigateTo({
            	url: '/subpak_survey/houseLanxi/houseLanxi?extra=' +
            		encodeURIComponent(JSON.stringify(arr)),
            });
						return;
					}
					uni.navigateTo({
						url: '/subpak_survey/house/house?extra=' + encodeURIComponent(JSON
							.stringify(arr)),
					});
				})			
			},
			handleSelectStreet(i) {
				const house = this.searchList[i];
				const areaId = house.areaId;
				const townId = house.community;
				const lotusAddressTree = this.lotusAddressTree;
				let selectArr = [];
				console.log(house);
				const cityArea = lotusAddressTree.find(area => {
					return (area.children || []).some(town => {
						const flag = town.id ===areaId;
						if (flag) {
							selectArr = [{
								id: area.id,
								name: area.title
							}, {
								id: town.id,
								name: town.title
							}, {
								id: house.id,
								name: house.community_dictText
							}]
						}
						return flag;
					});
				})
				if(cityArea){
					this.handleChoiceStreet(selectArr);
				}
				
			},
			//回传已选的省市区的值
			choseValue(res) {
				//res数据源包括已选省市区与省市区code
				console.log(res,'6.27');
				this.lotusAddressData.visible = res
				.visible; //visible为显示与关闭组件标识true显示false隐藏
				//res.isChose = 1省市区已选 res.isChose = 0;未选
				if (res.isChose) {
					this.lotusAddressData.provinceName = res.province; //省
					this.lotusAddressData.cityName = res.city; //市
					this.lotusAddressData.townName = res.town; //区
					this.region =
					`${res.province} ${res.city} ${res.town}`; //region为已选的省市区的值
				}
			},
		},
	};
</script>
<style>
	.search_container {
		padding: 20rpx 30rpx;
		background-color: #fff;
	}
</style>